<template>
	<view>
		<!--自定义导航栏-->
		<uniNavBar title='确认支付' left-text='关闭' fixed='true' status-bar='true' @clickLeft='goBack'></uniNavBar>

		<view class='pay-main'>
			<radio-group>
				<label for="">
					<view class="pay-item">
						<image class='pay-img' src='../../static/img/zfb.png' mode=""></image>
						<view>
							<view>支付宝支付</view>
							<view class='pay-txt'>推荐支付宝用户使用</view>
						</view>
						<label class="radio">
							<radio value="" color='#FF3333' /><text></text>
						</label>
					</view>
				</label>
				<label for="">
					<view class="pay-item">
						<image class='pay-img' src="../../static/img/wxf.png" mode=""></image>
						<view>
							<view>微信支付</view>
							<view class='pay-txt'>推荐微信用户使用</view>
						</view>
						<label class="radio">
							<radio value="" color='#FF3333' /><text></text>
						</label>
					</view>
				</label>
			</radio-group>
		</view>
		<!--去支付-->
		<view class='pay-foot'>
			<view class='total'>
				<text class="f-color">合计:</text>
				<text class='total-price'>¥{{details.price}}</text>
			</view>
			<view class="go-pay" @tap='goPayment'>去支付2</view>
		</view>

	</view>
</template>

<script>
	// 是否使用微信支付
	// https://uniapp.dcloud.net.cn/api/plugins/payment.html#requestpayment
	import uniNavBar from '@/components/uni/uni-nav-bar/uni-nav-bar.vue'
	import $http from '@/common/api/request.js'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				details: {
					price: 0,
					list: []
				}
			}
		},
		computed: {
			...mapState({
				orderNumber: state => state.order.orderNumber,
			})
		},
		components: {
			uniNavBar
		},
		onLoad(e) {
			this.details = JSON.parse(e.details);
		},
		methods: {
			//点击关闭返回上一页
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			goPayment() {
				uni.requestPayment({
					provider: 'alipay',
					"orderInfo": {
							"appid": "wx499********7c70e",  // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
							"noncestr": "c5sEwbaNPiXAF3iv", // 随机字符串
							"package": "Sign=WXPay",        // 固定值
							"partnerid": "148wx202wx20225452",      // 微信支付商户号
							"prepayid": "wx202254wx202254wx202254fbe90000", // 统一下单订单号 
							"timestamp": 1597935292,        // 时间戳（单位：秒）
							"sign": "A842B45937F6EFF60DEC7A2EAA52D5A0" // 签名，这里用的 MD5/RSA 签名
					},//微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
					}
				});



				// $http.request({
				// 	url: "/payment",
				// 	method: "POST",
				// 	// header: {
				// 	// 	token: true
				// 	// },
				// 	data: {
				// 		orderId: this.orderNumber,
				// 		price: this.details.price,
				// 		list: this.details.list
				// 	}
				// }).then((res) => {

				// 	// plus.runtime.openURL(res.paymentUrl);

				// 	uni.navigateTo({
				// 		url:"../payment-success/payment-success"
				// 	})

				// })



				//uni.navigateTo({
				// 	url:"../payment-success/payment-success"
				// })
			}
		}
	}
</script>

<style scoped>
	.pay-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		border-bottom: 2rpx solid #CCCCCC;
	}

	.pay-img {
		width: 100rpx;
		height: 100rpx;
	}

	.pay-txt {
		color: #CCCCCC;
	}

	.pay-foot {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.total {
		padding-left: 100rpx;
		flex: 1;
		background-color: #000000;
		line-height: 100rpx;
	}

	.go-pay {
		color: #FFFFFF;
		background-color: #49BDFB;
		line-height: 100rpx;
		text-align: center;
		width: 220rpx;
	}

	.total-price {
		color: #FFFFFF;
	}
</style>